<template>
    <!-- 应用app 骨架屏loading -->
    <el-card v-for="item in 3" :key="item" shadow="never" class="card-skeleton-item">
        <el-skeleton-item class="app-icon" variant="image" />
        <div class="skeleton-item-content">
            <el-skeleton-item variant="h1" style="width: 40%" />
            <div class="skeleton-item-text">
                <el-skeleton-item variant="text" />
                <el-skeleton-item variant="text" />
            </div>
            <div>
                <el-skeleton-item variant="text" />
            </div>
        </div>
        <el-skeleton-item class="skeleton-item-button" variant="button" />
    </el-card>
</template>

<style lang="scss" scoped>
.card-skeleton-item {
    display: inline-block;
    width: 336px;
    height: 358px;
    margin-right: 30px;
    margin-bottom: 20px;
    :deep(.el-card__body) {
        padding: 0;
    }
    .card_bottom {
        padding: 20px 30px;
    }
}
.skeleton-item-content {
    padding: 20px;
}
.skeleton-item-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block: 6px;
    :deep(.el-skeleton__item:first-child) {
        width: 40%;
        margin-right: 10px;
    }
}
.skeleton-item-button {
    width: 100px;
    margin-right: 20px;
    float: right;
}
.app-icon {
    width: 336px;
    height: 180px;
}
</style>
